<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type='text/css'>
.circle{width:200px;height:200px;position: relative;border: 1px solid red;}
.circle1, .circle2, .circle3, .center{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:60px;
height:60px;
border-radius:30px;
background-color:#666666;
}
.center{
position:absolute; 
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:70px;
height:70px;
border-radius:35px;
background:#111111;

}

.circle1{
-webkit-animation:circle 3s linear infinite;
animation:circle 3s linear infinite;
}

.circle2{
-webkit-animation:circle 3s linear 0.8s infinite;
animation:circle 3s linear 0.8s infinite;
}
.circle3{
-webkit-animation:circle 3s linear 1.6s infinite;/* Safari and Chrome */
animation:circle 3s linear 1.6s infinite;
}
@-webkit-keyframes circle{ 
from{
opacity:1;
-webkit-transform:translate(-50%,-50%) scale(0);

/* transform: translate(-50%,-50%); */
}
to{
opacity:0;
-webkit-transform:translate(-50%,-50%) scale(3);

}
}


</style>
</head>
<body>
<div class='circle'>
<div class='circle1'>&nbsp;</div>
<div class='circle2'>&nbsp;</div>
<div class='circle3'>&nbsp;</div>
<div class='center'></div>
</div>



</body>
</html>